import { message, Card,Tag,Row,Col,Pagination} from 'antd'
import React, { useEffect, useState } from 'react'
import { get } from '../../../util/get'
import {SyncOutlined,CheckCircleOutlined,MinusCircleOutlined,CloseCircleOutlined} from '@ant-design/icons'
import style from './index.module.css'
const { Meta } = Card;

export default function Apply() {
  const [list, setList] = useState([])
  const [page,setPage] = useState(1)
  const [total,setTotal]=useState(0)
  const token = localStorage.getItem('TOKEN')
  const tagArr = ['审核中','已通过','已取消','已驳回']
  const color = ['processing','success','default','error']
  const iconArr = [<SyncOutlined spin />,<CheckCircleOutlined />,<MinusCircleOutlined />,<CloseCircleOutlined />]
  useEffect(() => {
    (async () => {
      const res = await get('/shop/auditrecord/myApply?page=1&limit=8', token)
      // console.log(res,'申请')
      if (res.data.code === 0) {
        setList(res.data.data)
      }
      else message.error(res.data.msg);
    })()
  }, [token])
  return (
    <div>
      <Row gutter={[8, 16]}>
      {
        list.map(item => {
          const {phone,address,status,name,id,image} = item
          return (
            <Col span={6} >
            <Card
              hoverable
              style={{
                width: 250,
                height:400
              }}
              cover={<img width={250} height={250} alt="example" src={image} />}
              key={id}
            >
              <Meta title={name} description={
                <div>
                  <div>地址：{address}</div>
                  <div>电话：{phone}</div>
                  <div><Tag icon={iconArr[status]} color={color[status]}>{tagArr[status]}</Tag></div>
                </div>
              } />
            </Card>
            </Col>
          )
        })
      }
      </Row>
      <Pagination 
            className={style.pagination}
            current={page} defaultPageSize={8} 
            total={total} onChange={page=>{
                setPage(page);
            }}/>
    </div>
  )
}
